<script setup lang="ts">
import Son from './components/Son.vue'
import { ref } from 'vue'

// const handleChange = (newMoney: number) => {
//   if (newMoney <= 90) {
//     alert('今天花了十块钱')
//   } else {
//     money.value = newMoney
//   }
// }
const money = ref(100)
const car = ref('法拉利')
const score = ref(999)
</script>
<template>
  <div>
    <h1>我是父组件- {{ money }} - {{ car }}</h1>
    <hr />
    <!-- <Son :money.sync="money" @changeMoney="handleChange"></Son> -->
    <Son v-model:money="money" v-model:car="car" v-model:modelValue="score"></Son>

    <!-- vue2 .sync   -->
    <!--  <Son :money.sync="money"></Son> -->
    <!-- 1.子组件内部，直接通过 this,$emit('update:money', 值) 即可直接更新-->

    <!-- vue3已被废弃 换成v-model:属性名="属性值" -->
    <!--  <Son v-model:money="money"></Son> -->
    <!-- 1.子组件内部，直接通过emit('update:money', 值) 即可直接更新-->
  </div>
</template>
<!-- vue2  v-model -->
<!-- 1. <Son v-model="money"></Son> -->
<!--  ①:value = "money"-->
<!--  ② @input="money =传过来的值"-->
<!-- 2.props,通过 value 接收，触达事件，必须触发 input 事件 -->
<!-- this.$emit('input', 值) -->

<!-- vue3  v-model:modelValue="属性值" -->
<!-- 1 <Son v-model:modelValue="money"></Son> -->
<!--   <Son v-model="money"></Son> -->
<!-- 2.子组件内部，直接通过emit('update:modelValue', 值) 即可直接更新-->
<style scoped></style>
